<template>
  <com-header title="我的订单" @callHeight="acceptHeight"></com-header>
  <van-tabs
    v-model:active="active"
    title-active-color="#1baeae"
    color="#1baeae"
    sticky
    swipeable
    :offset-top="navH"
    @click-tab="onClickTab"
  >
    <van-tab :title="item.name" v-for="(item, index) in tab_items" :key="index">
      <van-list
        v-model:loading="tab_conts[index].loading"
        :finished="tab_conts[index].finished"
        :finished-text="tab_conts[index].list.length == 0 ? '' : '没有更多了'"
        @load="onLoad"
      >
        <template v-for="(item, i) in tab_conts[index].list" :key="i">
          <Order :item="item" @initList="initList"></Order>
        </template>
        <van-empty description="暂无订单" v-if="tab_conts[index].list.length == 0 && tab_conts[index].p == 1" />
      </van-list>
    </van-tab>
  </van-tabs>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, defineAsyncComponent } from "vue";
import { getOrder, getOrderList } from "@/service/good";
import { useStore } from "@/stores/store";
interface ITab {
  name: string;
  status: number;
  num: number;
}
type IList = {
  loading: boolean;
  finished: boolean;
  list: IOrder[];
};
type IOrder = {
  image?: string;
  price?: number;
  id?: number;
  buynum?: number;
};
export default defineComponent({
  components: {
    Order: defineAsyncComponent(() => import("./components/order.vue")),
  },
  setup() {
    const active = ref(0),
      store = useStore(),
      uid = store.state.user.uid,
      tab_items = ref<ITab[]>([]),
      tab_conts = ref<any>([]), navH = ref(0);

    const initTabItems = () => {
      getOrder({ uid: uid }).then((res) => {
        tab_items.value = res.data;
        res.data.forEach((item: any, index: number) => {
          tab_conts.value.push(
            {
              loading: true,
              finished: false,
              list: [],
              p: 0,
              isLoading: false
            }
          );
        });
      });
    };

    const onClickTab = (e: any) => {
      let {name} = e;
      active.value = name;
      initList();
    }

    const acceptHeight = (h: number) => {
      navH.value = h;
    }

    const initList = () => {
      tab_conts.value[active.value] = {
        loading: false,
        finished: false,
        list: [],
        p: 0,
        isLoading: false
      };
      onLoad();
    }

    const onLoad = () => {
        let {loading, finished, list, p, isLoading} = tab_conts.value[active.value];
        if (!isLoading && !finished) {
          tab_conts.value[active.value].isLoading = true
          p++;
          getOrderList({
            p: p,
            n: 10,
            uid: uid,
            type: "all",
            status: active.value ? tab_items.value[active.value].status : '',
          }).then((res) => {
            isLoading = false;
            loading = false;
            if (res && res.data) {
              list = list.concat(res.data);
              console.log(list)
            } else {
              if (p == 1) list = [];
              finished = true;
            }
            tab_conts.value[active.value] = {list, finished, loading, p, isLoading}
          });
        }
        

    };
    onMounted(() => {
      initTabItems();
    });
    return {
      active,
      tab_items,
      tab_conts,
      navH,
      onLoad,
      onClickTab,
      acceptHeight,
      initList
    };
  },
});
</script>
